<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理店铺</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <!-- layer -->
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>

    <script>
        // 网页加载完成后运行
        $(document).ready(function () {
        })
    </script>

    <script>
        layui.use('table', function () {
            var table = layui.table;
            console.log('table option')

            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    // 查看商品列表
                    console.log('start show product list')
                    //$("#div_product_list").load("/show_product_list_in_edit_page/?shop_id=" + data.shop_id)
                    $.ajax({
                        url: "/show_product_list_in_edit_page/?shop_id=" + data.shop_id,
                        datatype: "json",
                        type: 'get',
                        success: function (product_list_in_edit_page_html_dict) {
                            //成功后回调
                            //console.log(msg);

                            var div_product_list = document.getElementById('div_product_list');
                            div_product_list.innerHTML = product_list_in_edit_page_html_dict.all_product_list_in_edit_page_html;

                            var div_published_product_list = document.getElementById('div_published_product_list');
                            div_published_product_list.innerHTML = product_list_in_edit_page_html_dict.published_product_list_in_edit_page_html;


                        },
                        error: function (e) {
                            //失败后回调
                            alert("服务器请求失败");
                        },
                        beforeSend: function () {
                            //发送请求前调用，可以放一些"正在加载"之类额话
                            //alert("正在加载");
                        }
                    })

                    console.log('end show product list')

                } else if (obj.event === 'del') {
                    layer.confirm('是否删除：' + data.shop_name, function (index) {
                        console.log('msg...', 'click delete')
                        $.getJSON('/delete_shop/', {'shop_id': data.shop_id}, function (msg) {
                            console.log('msg...return json');
                            if (msg.msg == 'success') {
                                obj.del();
                                table.reload('idTest');
                            }
                            else {
                                layer.msg(msg);
                            }
                        })
                        layer.close(index)
                    })
                } else if (obj.event === 'edit') {
                    console.log('start edit')
                    //编辑页面
                    layer.open({
                        type: 2,
                        title: '编辑店铺信息',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['500px', '300px'], //宽高
                        content: '/edit_shop/?shop_id=' + data.shop_id + '&shop_name=' + data.shop_name + '&shop_url=' + data.shop_url,
                        shadeClose: true, //点击遮罩关闭层
                        btn: ['修改', '取消'],
                        yes: function (index, layero) {
                            //调用edit_shop页面的函数
                            var iframeWin = $("div.layui-layer-content > iframe")[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            iframeWin.form_submit();
                            layer.close(index);
                        },
                        no: function (index, layero) {
                            layer.close(index);
                        },
                        end: function (index) {
                            //这个要写在end中，如果卸载yes中，从这一次表不会更新，为什么？
                            table.reload('idTest')
                        }
                    });
                }
                else if (obj.event === 'crawl') {
                    $.ajax({
                        url: '/crawl_one_shop_product_list/?shop_id=' + data.shop_id,
                        datatype: 'json',
                        type: 'get',
                        success: function (msg) {
                            if (msg.res == 'success') {
                                layer.msg('店铺：' + data.shop_name + ' 爬取完成')
                            }
                        }
                    })
                }
            });

            var $ = layui.$, active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                , getCheckLength: function () { //获取选中数目
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                }
                , add_shop: function () {
                    //添加店铺页面
                    layer.open({
                        type: 2,
                        title: '添加店铺',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['500px', '300px'], //宽高
                        content: '/create_shop/',
                        shadeClose: true, //点击遮罩关闭层
                        btn: ['添加', '取消'],
                        yes: function (index, layero) {
                            //调用edit_shop页面的函数
                            var iframeWin = $("div.layui-layer-content > iframe")[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            iframeWin.form_submit();
                            layer.close(index);
                        },
                        no: function (index, layero) {
                            layer.close(index);
                        },
                        end: function (index) {
                            //这个要写在end中，如果卸载yes中，从这一次表不会更新，为什么？
                            table.reload('idTest')
                        }
                    });

                }
                , crawl_all_shop_product_list: function () {
                    $.ajax({
                        url: '/start_crawl_all_shop_product_list/',
                        datatype: 'json',
                        type: 'get',
                        success: function (msg) {
                            if (msg.res == 'success') {
                                layer.msg('爬取完毕');
                            }
                        },
                    });
                }
                , isAll: function () { //验证是否全选
                    var checkStatus = table.checkStatus('idTest');
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

        function crawl_one_shop_product_list(evt) {
            shop_id = evt.target.value;
            console.log('shop_id=' + shop_id);
            $.ajax({
                url: '/crawl_one_shop_product_list/?shop_id=' + shop_id,
                datatype: 'json',
                type: 'get',
                success: function (msg) {
                    if (msg.res == 'success') {
                        layer.msg('店铺：' + data.shop_name + ' 爬取完成')
                    }
                }
            })
        }
    </script>
</head>
<body>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="add_shop">添加店铺</button>
    <button class="layui-btn" data-type="crawl_all_shop_product_list">爬取全部店铺的商品信息</button>
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>

<table class="layui-table" lay-data="{ height:332, url:'/get_shop_table_msg/', page:false, id:'idTest'}"
       lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{checkbox:true, fixed: true}"></th>
        <th lay-data="{field:'shop_id', width:80, sort: true, fixed: true}">店铺ID</th>
        <th lay-data="{field:'shop_name',width:200, sort: true}">店铺名称</th>
        <th lay-data="{field:'shop_url', width:500, templet:'#a_shop_url'}">店铺Url</th>
        <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barDemo'}"></th>
        <th lay-data="{fixed: 'right', width:60, align:'center', toolbar: '#crawl_one_shop'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="a_shop_url">
    <a href="{% verbatim %}{{ d.shop_url }}{% endverbatim %}" class="layui-table-link" target="_blank"> {% verbatim %}{{
        d.shop_url }}{% endverbatim %} </a>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="crawl">爬取</a>
</script>

<script type="text/html" id="crawl_one_shop">
    <button class="layui-btn layui-btn-warm layui-btn-mini" value="{% verbatim %}{{ d.shop_id }}{% endverbatim %}" onclick="crawl_one_shop_product_list(event)">爬取
    </button>
</script>

<script>
    // tab控件必须有下面的代码，才可以切换
    layui.use('element', function () {
        var element = layui.element;

        //一些事件监听
        element.on('tab(demo)', function (data) {
            console.log(data);
        });
    });
</script>


<div class="layui-tab" lay-filter="mytab">
    <ul class="layui-tab-title">
        <li class="layui-this">全部商品</li>
        <li>已上架商品</li>
        <li>已下架商品</li>
        <li>已删除商品</li>
    </ul>
    <div class="layui-tab-content" height=auto>
        <div class="layui-tab-item layui-show" id="div_product_list"></div>
        <div class="layui-tab-item" id="div_published_product_list">hello1</div>
        <div class="layui-tab-item">hello2</div>
        <div class="layui-tab-item">hello3</div>
    </div>
</div>


</body>
</html>